<template>
  <div class="works-box">
    <div class="works-box-item" v-for="(item, index) in list" :key="index">
      <img :src="publicPath + item.src" />
      <div class="works-box-item-textbox">
        <span class="title">{{ item.title }}</span>
        <span class="auth">{{ item.auth }}</span>
      </div>
    </div>
    <div class="works-box-item">
      <div class="title-box">
        <div class="title-title">一起来</div>

        <div class="title-title">加入我们吧</div>
      </div>
      <img class="title-nall" :src="publicPath + 'nall.png'" />
      <img :src="publicPath + 'studentWork9.png'" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "星空明目黑",
          auth: "35期学员-萱萱",
          src: "studentWork1.png"
        },
        {
          title: "星空明目黑",
          auth: "35期学员-yoyo",
          src: "studentWork2.png"
        },
        {
          title: "星空明目黑",
          auth: "35期学员-Kiva",
          src: "studentWork3.png"
        },
        {
          title: "红眉蓝眉改眉术",
          auth: "35期学员-萱萱",
          src: "studentWork4.png"
        },
        {
          title: "明星点雾眉",
          auth: "35期学员-萱萱",
          src: "studentWork5.png"
        },
        {
          title: "明星粉墨眉",
          auth: "35期学员-萱萱",
          src: "studentWork6.png"
        },
        {
          title: "红眉蓝眉改眉术",
          auth: "35期学员-萱萱",
          src: "studentWork7.png"
        },
        {
          title: "明星点雾眉",
          auth: "35期学员-萱萱",
          src: "studentWork8.png"
        }
      ],
      publicPath: process.env.BASE_URL
    };
  }
};
</script>

<style lang="scss" scoped>
.works-box {
  width: 96%;
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  flex-wrap: wrap;
  .works-box-item {
    width: 33.333%;
    box-sizing: border-box;
    padding: 0 5px;
    position: relative;
    margin-top: 5px;

    .works-box-item-textbox {
      position: absolute;
      bottom: 0;
      width: 100%;
      color: #fff;
      height: 22%;
      box-sizing: border-box;
      padding-right: 10%;
      span {
        display: block;
        width: 100%;
      }
      .title {
        font-size: 13px;
        margin-left:3px ;
      }
      .auth {
        font-size: 7px;
        text-align: right;
        margin-top: 4px;
      }
    }

    img {
      width: 100%;
    }
  }
  .title-box {
    width: 100%;
    height: 40%;
    position: absolute;
    display: block;
    color: #fff;
    text-align: center;
    margin: 20px 0 0 0;
  }
  .title-title {
    margin-top: 10px;
  }
  .title-nall {
    width: 50% !important;
    position: absolute;
    right: 7%;
    bottom: 7%;
  }
}
</style>
